<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="datepicker/skin/WdatePicker.css">
		
		<style type="text/css">
			*{margin: 0;padding: 0;}
			table{
				width: 1500px;
				margin: 0px auto;
				text-align: center;
				border-collapse: collapse;  
			}
			caption{
				height: 50px;
				font-size: 30px;
				line-height: 50px;
			}
			th{
				border: 1px solid #999;
				height: 50px;
			}
			td{
				border: 1px solid #999;
				width: 150px;
				height: 50px;
			}
			.todo,.delete{
				height: 35px;
				width: 70px;
				border: none;
				border: 1px solid #ddd;
				border-radius: 5px;
				outline: none;	
			}
			.todo{
				background-color: #008B8B;	
			}
			.delete{
				background-color: #dd4012;
			}
			.model{
				display: none;
			}
			.box{
				width: 300px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: rgba(0,0,0,0.3);
				/* position: absolute;
				top:150px;
				left:50%; */
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				display: none;
			}
			.sure ,.cut {
				width: 50px;
				height: 30px;
				border-radius: 5px;
				
			}
			
			.add{
				width: 100px;
				height: 50px;
				background-color: darkcyan;
				outline: none;
				border: none;
				border-radius: 8px;	
				margin-top: 20px;
				margin-left: 20px;
			}
			button{
				font-size: 18px;
			}
			.addmessage{
				width: 600px;
				background-color: darkcyan;
				transform:translate(-50%,-50%);
				position:fixed;
				top:50%;
				left:50%;
				display: none;
				z-index: 2;
				font-size: 20px;
				padding: 20px 18px;
				
			}
			.addmessage h3{
				font-weight: normal;
				text-align: center;
				font-size: 24px;
				padding-top: 10px;
				
			}
		
			.message{
				width: 300px;
				height: 40px;
				display: block;
				margin-top: 10px;
				margin-bottom: 10px;
				outline: none;
				border: none;
				border-radius: 5px;
				
			}
			.addmessage label{
				display: block;
				padding: 10px 0;
			}
			
			.send,.cancle{
				margin-top: 10px;
				margin-bottom: 10px;
				height:30px;
				width: 80px;
				outline: none;
				border: none;
				border-radius: 5px;
				background-color: #fff;
			}
			.overlook{
				margin-top: 10px;
				margin-bottom: 10px;
				height:30px;
				width: 80px;
				outline: none;
				border: none;
				border-radius: 5px;
				background-color: #fff;
			}
			.mask{
				height: 100%;
				width: 100%;
				position: fixed;
				top: 0;
				background-color: rgba(0,0,0,0.3);
				display: none;
			}
			.todomodel{
				background-color: wheat;
			} 
			.todosend{
				height:30px;
				width: 80px;
				outline: none;
				border: none;
				border-radius: 5px;
			}
			
			.todomodel{
				display: none;
				
			}
			
		</style>
	</head>
	<body>
		<div >
			<button class="add">添加学生</button>
		</div>
		<table >
			<caption>学生信息管理系统</caption>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>籍贯</th>
				<th>入学时间</th>
				<th>操作</th>
			</tr>
			<tr class="model">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				
				<td>
					<button class="todo">编辑</button>
					<button class="delete">删除</button>	
				</td>
			</tr>
			
		</table>
		
		<div class="box">
			<button class="sure">确认</button>
			<button class="cut">取消</button>
		</div>
		
		<div class="addmessage">
			<div>
				<h3>添加学生信息</h3>
			</div>
			
			<div>
				<label for="nname">姓名</label>
				<input type="text" id="nname" placeholder="请输入姓名" class="message">
			</div>   
			<div>
				<label for="nage">年龄</label>
				<input type="text" id="nage" placeholder="请输入年龄" class="message">
			</div>
			<div>
				<label for="data-joinDate">入学日期</label>
				<input type="text" id="data-joinDate" onclick="WdatePicker()" placeholder="请输入入学日期" class="message">
			</div>
			<div>
				<label for="ncity">籍贯</label>
				<select name="" id="province"></select>
				<select name="" id="city"></select>
				<select name="" id="area"></select>	
			</div>
			<div>
				<label for="nsex">性别</label>
				男<input type="radio" name="sex" id="male" value="" checked />
				女<input type="radio" name="sex" id="famale" value="" />
			</div>
			<div>
				<button type="submit" class="send">确认添加</button>
				<button type="submit" class="overlook">确认编辑</button>
				<button type="submit" class="cancle">取消添加</button>
			</div>
			
		</div>
		<div class="mask"></div>
		
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="datepicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="citys.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// console.log(citys)
			let province=$("#province")
			let city=$("#city")
			let area=$("#area")
			citys.forEach(item=>{
				let option = $(`<option>${item.provinceName}</option>`)
				province.append(option)
			})
			citys[0].mallCityList.forEach(item=>{
				let option = $(`<option>${item.cityName}</option>`)
				city.append(option)
			})
			citys[0].mallCityList[0].mallAreaList.forEach(item=>{
				let option=$(`<option>${item.areaName}</option>`)
				area.append(option)
			})
			province.change(function(){
				city.empty();
				area.empty();
				citylist= citys[this.selectedIndex].mallCityList
				citylist.forEach(item=>{
					let option = $(`<option>${item.cityName}</option>`)
					city.append(option)
				})
				
				citylist[0].mallAreaList.forEach(item=>{
					let option=$(`<option>${item.areaName}</option>`)
					area.append(option)
				})	
			})
			
			city.change(function(){
				area.empty();
				let arealist = citylist[this.selectedIndex].mallAreaList;
				console.log(arealist)
				arealist.forEach(item=>{
					let option=$(`<option>${item.areaName}</option>`)
					area.append(option)
				})
			})
			let model=$(".model")
			let address="http://10.35.170.143:8080"
			// 删除按钮点击事件
			$(".delete").click(function(){
				 _this=this
				$(".box").css("display","block")
				
			})
			$(".sure").click(function(){
				$.ajax({
					url : `${address}/deletestus`,
					data : {
						id:$(_this).closest("tr").find("td").eq(0).html()
					},
					success(data){
						history.go(0)
					}	
				})
			})
			$(".cut").click(function(){
				$(".box").css("display","none")
			})
			
			$(".add").click(function(){
				$(".overlook").css("display","none")
				$(".mask").css("display","inblock")
				$(".addmessage").css("display","block")
			})
			$(".send").click(function(){
				if($("#nname").val()===""||$("#nage").val()===""){
					return
				}
				else{
					$.ajax({
						url:`${address}/addstus`,
						data:{
							name:$("#nname").val(),
							age:$("#nage").val(),
							joinDate:$("#data-joinDate").val(),
							sex:$("#male")[0].checked ? 1:0,
							city:province.val()+city.val()+area.val()
						},
						success(data){
							if(data==="添加学生成功"){
								history.go(0)
							}
							else{
								alert(`添加学生失败`)
							}
						}
					})
				}
			})
			$(".cancle").click(function(){
				$(".mask").css("display","none")
				$(".addmessage").css("display","none")
			})
			
			$(".todo").click(function(){
				$(".overlook").css("display","inline-block")
				$(".send").css("display","none")
				$(".mask").css("display","block")
				$(".addmessage").css("display","block")
				$("h3").html("编辑学生信息")
				$(".cancle").html("取消编辑")
				$("#nname").val($(this).closest("tr").find("td").eq(1).html())
				$("#nage").val($(this).closest("tr").find("td").eq(2).html())
				$("#data-joinDate").val($(this).closest("tr").find("td").eq(5).html())
				_this=this
			})
			
			$(".overlook").click(function(){
				
				$.ajax({
					url:`${address}/editstus`,
					data:{
						id:$(_this).closest("tr").find("td").eq(0).html(),	
						name:$("#nname").val(),
						age:$("#nage").val(),
						joinDate:$("#data-joinDate").val(),
						sex:$("#male")[0].checked ? 1:0,
						city:province.val()+city.val()+area.val()
						
					},
					success(data){
						if(data==="编辑学生成功"){
							history.go(0)
						}
						else{
							alert("编辑学生失败")
						}
					}
				})
			})
			
			
			$.ajax({
				url:`${address}/getstus`,
				success(data){
					console.log(data)
					let table=$("table")
					data.forEach(item=>{
						let models=model.clone(true)
						models.attr("class","")
						models.find("td").eq(0).html(item.id)
						models.find("td").eq(1).html(item.name)
						models.find("td").eq(2).html(item.age)
						models.find("td").eq(3).html(item.sex ?"男" : "女")
					
						models.find("td").eq(4).html(item.city)
						models.find("td").eq(5).html(item.joinDate)
						models.appendTo(table)
					})
				}
			})
		</script>
	</body>
</html>
